<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2020/8/11
  Time: 19:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册</title>
    <link rel="stylesheet" href="/user/Login.css">
    <link rel="stylesheet" href="/static/icon/icon.css">
    <link rel="stylesheet" href="/static/css/reset.css">
    <%--layui css--%>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <style>
        /*头部样式的修改*/
        #xc-user-header {
            width: 980px;
            height: 90px;
            margin: 0 auto;
            padding: 0 10px;
        }
        /* 跳转部分*/
        #xc-user-header .xc-jumpHome {
            float: left;
            width: 203px;
            padding-top: 22px;
            margin-right: 10px;
        }
        #xc-user-header .xc-jumpHome a {
            display: block;
            width: 100%;
            height: 45px;
            overflow: hidden;
            background: url("/static/imgs/user-register-logo.png") no-repeat;
            background-size: 100% 100%;
        }

        /* 标题部分修改*/
        #xc-user-body .xc-body-wrapper .xc-login .xc-login-wrapper .xc-login-box .xc-box-title{
            padding-bottom: 16px;
            font-size: 18px;
            color: #111;
            /*line-height: 1;*/
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 输入框部分的修改*/
        #xc-user-body .xc-body-wrapper .xc-login .xc-login-wrapper .xc-login-box .xc-part-inputLogin .xc-input{
            position: relative;
            width: 300px;
            height: 36px;
            padding: 5px 5px 5px 13px;
            margin-bottom: 20px;
            line-height: 36px;
            font-size: 14px;
        }
        #xc-user-body .xc-body-wrapper .xc-login .xc-login-wrapper .xc-login-box .xc-part-inputLogin .xc-input dt{
            float: left;
            margin-right: 10px;
        }
        #xc-user-body .xc-body-wrapper .xc-login .xc-login-wrapper .xc-login-box .xc-part-inputLogin .xc-input input{
            float: right;
            width: 230px;
            border: 1px solid #ccc;
            height: 36px;
            line-height: 36px;
            font-size: 14px;
        }
        /* 2.2.3 点击注册 部分*/
        #xc-user-body .xc-body-wrapper .xc-login .xc-login-wrapper .xc-login-box .xc-part-inputLogin .xc-submit-login {
            background-color: #FF9A14;
            width: 50%;
            height: 42px;
            line-height: 42px;
            margin: 10px auto;
            border: none;
            color: #FFFFFF;
            font-size: 16px;
            border-radius: 4px;
            clear: both;
            cursor: pointer; /*光标*/
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 弹窗 (background) */
        .xc-modal {
            display: none; /* 默认隐藏 */
            position: fixed;
            z-index: 1;
            padding-top: 100px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.2);
        }
        /* 弹窗内容 */
        .xc-modal .xc-modal-content {
            position: relative;
            background-color: #fefefe;
            margin: auto;
            padding: 0;
            border: 1px solid #888;
            width: 660px;
            height: 400px;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
            -webkit-animation-name: animatetop;
            -webkit-animation-duration: 0.4s;
            animation-name: animatetop;
            animation-duration: 0.4s
        }
        .xc-modal .xc-modal-content .xc-modal-header {
            padding: 2px 16px;
            color: black;
            height: 20px;
        }
        .xc-modal .xc-modal-content .xc-modal-header h2{
            left: 5px;
            line-height: 20px;
            font-weight: 800;
            font-size: 16px;
            margin-top: 10px;
        }

        .xc-modal .xc-modal-content .xc-modal-body {
            padding: 2px 16px;
            margin-top: 20px;
            font-size: 12px;
            overflow-y: scroll;
            height: 300px;
        }
        .xc-modal .xc-modal-content .xc-modal-body .xc-bold{
            font-weight: 800;
            font-size: 14px;
            margin: 5px auto;
        }
        .xc-modal .xc-modal-content .xc-modal-body .xc-content-other{
            font-size: 12px;
            margin: 2px auto;
        }

        .xc-modal .xc-modal-content .xc-modal-footer {
            padding: 2px 16px;
            color: black;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .xc-modal .xc-modal-content .xc-modal-footer .xc-disagree{
            /*float: left;*/
            /*left: 100px;*/
            width: 150px;
            margin-right: 50px;
            height: 40px;
            color: black;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            cursor: pointer; /*光标*/
        }
        .xc-modal .xc-modal-content .xc-modal-footer .xc-agree{
            width: 150px;
            height: 40px;
            margin-left: 50px;
            font-size: 16px;
            background-color: #fb9125;
            color: white;
            border: 1px solid #ccc;
            border-radius: 4px;
            cursor: pointer; /*光标*/
        }
        .xc-modal .xc-modal-content .xc-modal-footer .xc-agree:hover{
            background-color: rgba(251, 145, 37, 0.6);

        }
        /* 添加动画 */
        @-webkit-keyframes animatetop {
            from {top:-300px; opacity:0}
            to {top:0; opacity:1}
        }

        /* 关闭按钮 */
        .close {
            color: #CCCCCC;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
<!--头部-->
<header id="xc-user-header">
    <!--头部包装器-->
    <h1 class="xc-jumpHome">
        <a href="http://localhost:8090/index/Index.jsp" type="hidden" title="携程旅行网"></a>
    </h1>
</header>
<!--主体部分-->
<mianBody id="xc-user-body">
    <div class="xc-body-wrapper">
        <!--广告背景图-->
        <div class="xc-background-wrapper">
            <div class="xc-part-img">
                <div class="xc-part-ads">
                    <span class="xc-ads">广告</span>
                </div>
            </div>
        </div>
        <!--个性化注册-->
        <div class="xc-login">
            <div class="xc-login-wrapper">
                <!--个性化登录-->
                <div class="xc-login-box">
                    <!--标题部分-->
                    <h1 class="xc-box-title">
                        携程账号注册
                    </h1>
                    <!--输入账号密码及登录部分-->
                    <div class="xc-part-inputLogin">
                        <form action="/api/user/addUser"  method="post" onsubmit="return checkAll()">
                            <!--账号输入-->
                            <dl class="xc-input">
                                <dt class="xc-reg-label">注册账号</dt>
                                <dd>
                                    <input class="xc-inputAccount" type="text" name="user_phone" placeholder="国内手机号" autocomplete="off" onblur="checkAccount()" id="account">
                                    <span  style="font-size:12px;height: 12px;line-height: 12px" id="accountSpan"></span>
                                </dd>
                            </dl>
                            <!--密码输入-->
                            <dl class="xc-input">
                                <dt class="xc-reg-label">设置密码</dt>
                                <dd>
                                    <input class="xc-inputPassword" type="password" name="user_password" placeholder="请输入密码" autocomplete="off" onblur="checkPassword()" id="user_password">
                                    <span  style="font-size:12px;height: 12px;line-height: 12px" id="user_passwordSpan"></span>
                                </dd>
                            </dl>
                            <div class="mm-login-error" style="display: none">${message}</div>
                            <!--密码确认-->
                            <dl class="xc-input">
                                <dt class="xc-reg-label">确认密码</dt>
                                <dd>
                                    <input class="xc-inputPassword" type="password" name="password" placeholder="请输入密码" autocomplete="off" onblur="checkSame()" id="password">
                                    <span  style="font-size:12px;height: 12px;line-height: 12px" id="passwordSpan"></span>
                                </dd>
                            </dl>
                            <!--注册-->
                            <dl>
                                <dd>
                                    <!--点击注册部分-->
                                    <button class="xc-submit-login" type="submit" onclick="getResult()">注  册</button>
                                    <%--弹窗--%>
                                    <input id="msg" type="text" value="${message}" style="display: none">
                                </dd>
                            </dl>
                            <!--提示-->
                            <p class="xc-agreement">
                                注册即代表您同意我们的
                                <a href="">服务协议</a>
                                和
                                <a href="">隐私政策</a>
                            </p>
                        </form>
                    </div>
                    <!--选择其他注册方式-->
                    <div class="xc-login-selection">
                        <!--关于注册-->
                        <div class="xc-login-about">
                            <a href="">境外手机</a>
                            <span class="xc-sep">|</span>
                            <a href="">企业客户注册</a>
                            <span class="xc-sep">|</span>
                            <a href="">携程通</a>
                            <a href="http://localhost:8090/user/userLogin.jsp" class="free-register">已有账号？立即登录</a>
                        </div>
                        <!--选则其他注册方式-->
                        <div class="xc-login-other">
                            <!--支付宝-->
                            <a href="" class="iconfont xc-icon-alipay" >&#xe65c;</a>
                            <!--qq-->
                            <a href="" class="iconfont xc-icon-qq">&#xe603;</a>
                            <!--百度-->
                            <a href="" class="iconfont xc-icon-baidu">&#xe600;</a>
                            <!--新浪微博-->
                            <a href="" class="iconfont xc-icon-sina">&#xe621;</a>
                            <!--微信-->
                            <a href="" class="iconfont xc-icon-wechat">&#xe60c;</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</mianBody>
<!--底部-->
<footer id="xc-user-foot">
    <div class="xc-foot-wrapper">
        <p>
            <a href="http://pages.ctrip.com/public/sitemap/sitemap.htm">网站导航</a>
            |
            <a href="">宾馆索引</a>
            |
            <a href="">用户协议</a>
            |
            <a href="">关于携程</a>
            |
            <a href="">企业公民</a>
            |
            <a href="">诚聘英才</a>
            |
            <a href="">分销联盟</a>
            |
            <a href="">企业礼品卡采购</a>
            |
            <a href="">代理合作</a>
            |
            <a href="">广告业务</a>
            |
            <a href="">联系我们</a>
            |
            <a href="">返回旧版</a>
        </p>
        <p>
            <a href="">Copyright ©</a>
            1999-2020,
            <a href="">ctrip.com</a>
            . All rights reserved.
        </p>
    </div>
</footer>

<!-- 打开弹窗按钮 -->
<%--<button id="myBtn">打开弹窗</button>--%>
<!-- 弹窗 -->
<div id="myModal" class="xc-modal">
    <!-- 弹窗内容 -->
    <div class="xc-modal-content">
        <div class="xc-modal-header">
            <span class="close">&times;</span>
            <h2>携程用户注册协议和隐私政策</h2>
            <hr>
        </div>
        <div class="xc-modal-body">
            <p class="xc-bold">亲爱的用户，在您注册为携程用户的过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意，尤其是加粗字体。</p>
            <p class="xc-content-other">
                1. 总则
                2. 服务简介
                3. 服务条款的修改
                4. 服务变更、中断、终止
                5. 使用规则
                6. 版权声明
                7. 用户隐私制度
                8. 用户的账号、密码和安全性
                9. 拒绝提供担保
                10. 有限责任
                11. 携程网络会员服务信息的存储及限制
                12. 用户管理
                13. 用户的违约责任
                14. 保障
                15. 结束服务
                16. 通告
                17. 参与广告策划
                18. 邮件内容的所有权
                19. 法律
                <br/>
                <a href="" style="color:blue;font-size: 14px">隐私政策</a>
                <br/>
            <p class="xc-bold">隐私政策明确了我们产品与/或服务所收集、使用及共享个人信息的类型和方式及用途；明确了用户查询、更正和删除个人信息的方式，具体提纲如下：</p>
            1.隐私政策的确认和接纳
            2.信息收集
            3.信息使用
            4.信息共享、转让和披露
            5.信息保存及跨境传输
            6.Cookie的使用
            7.个人敏感信息提示
            8.信息安全与保护
            9.信息安全事件处置
            10.未成年人信息保护
            11.用户个人信息管理
            12.从中国大陆地区以外访问我们的网站
            13.隐私政策的适用范围
            14.隐私政策的修改
            15.如何联系我们
            16.法律
            <p class="xc-content-other" style="font-size: 14px">【审慎阅读】您在申请注册流程中点击同意前，请您务必审慎阅读、充分理解协议中相关条款内容，尤其是与您约定免除或限制责任的条款，以及字体加粗标识的重要条款。</p>
            <p class="xc-bold">【请您注意】如果您不同意上述协议或其中任何条款约定，请您停止注册。如果您按照注册流程提示填写信息、阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容。如果您对以上内容有疑问，请联系：privacy@ctrip.com。
                点击同意即代表您已阅读并同意携程《服务协议》和《隐私政策》，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方。</p>
            </p>
        </div>
        <div class="xc-modal-footer">
            <a href="http://localhost:8090/index/Index.jsp">
                <button class="xc-disagree">
                    不同意
                </button>
            </a>
            <button class="xc-agree">
                同意并继续
            </button>
        </div>
    </div>
</div>


<script>
    //1. 检查输入账户
    var flag = true;

    function checkAccount(){
        var account = document.getElementById("account").value;
        var accountSpan = document.getElementById("accountSpan");
        //
        var reg = /^1[0-9]\d{9}$/i;
        if(reg.test(account)){
            //符合规则
            accountSpan.innerHTML = "";
            return true;
        }else{
            //不符合规则
            accountSpan.innerHTML = "请输入11位长的内地手机号".fontcolor("red");
            return false;
        }
    }


    //2. 检查密码
    function checkPassword(){
        var user_password = document.getElementById("user_password").value;
        var user_passwordSpan = document.getElementById("user_passwordSpan");
        //密码的规则： 6-16，包含任意的字母、数字，不可以使用其他符号
        var reg = /^([a-zA-Z0-9]){6,16}$/i;
        if(reg.test(user_password)){
            //符合规则
            user_passwordSpan.innerHTML = "";
            return true;
        }else{
            //不符合规则
            user_passwordSpan.innerHTML = "密码的长度为6-16，包含任意的字母、数字，不可以使用其他符号".fontcolor("red");
            return false;
        }
    }

    //3. 检查两次输入的密码是否一致
    function checkSame(){
        var user_password = document.getElementById("user_password").value;
        var password = document.getElementById("password").value;
        var passwordSpan = document.getElementById("passwordSpan");
        //密码的规则： 6-16，包含任意的字母、数字，不可以使用其他符号
        var reg = /^([a-zA-Z0-9]){6,16}$/i;
        //确认密码输入符合规则
        if(reg.test(password)){
            //符合规则
            if(user_password === password){
                passwordSpan.innerHTML = "";
                return true;
            }else{
                passwordSpan.innerHTML = "两次输入的密码不一致！请重新输入".fontcolor("red");
                return false;
            }
        }
        //确认输入密码不符合规则
        else{
            passwordSpan.innerHTML = "密码的长度为 6-16，包含任意的字母、数字，不可以使用其他符号".fontcolor("red");
            return false;
        }
    }

    //4. 检查用户所有的输入的所有是否符合规则
    function checkAll(){
        var account = checkAccount();
        var checkPassword = checkPassword();
        var checkSame = checkSame();
        if(account&&checkPassword&&checkSame){
            return true;
        }else{
            return false;
        }
    }
</script>
<%--弹窗--%>
<script>
    window.onload = function () {
        // 获取弹窗
        var modal = document.getElementById('myModal');
        // 获取 <span> 元素，用于关闭弹窗 that closes the modal
        var span = document.getElementsByClassName("close")[0];
        var button = document.getElementsByClassName("xc-agree")[0];
        // 显示弹窗
        modal.style.display = "block";
        // 点击 <span> (x), 关闭弹窗，进入主页
        span.onclick = function() {
            modal.style.display = "none";
            window.location.href="http://localhost:8090/index/Index.jsp";
        }
        // 在用户点击其他地方时，关闭弹窗，进入主页
        window.onclick = function(event) {
            if (event.target === modal) {
                modal.style.display = "none";
                window.location.href="http://localhost:8090/index/Index.jsp";
            }
        }
        // 点击同意, 关闭弹窗，进入注册页
        button.onclick = function() {
            modal.style.display = "none";
        }
    }
</script>
<%--<script>--%>
<%--    let result = document.getElementById("msg").value;--%>
<%--    console.log(result);--%>
<%--    function getResult() {--%>
<%--        // let result = document.getElementById("msg").value;--%>
<%--        let str = '用户已存在';--%>
<%--        let str2 = '注册成功!';--%>
<%--        console.log(result);--%>
<%--        if(result === str){--%>
<%--            alert('用户已存在，请登录！');--%>
<%--            // window.location.href="http://localhost:8090/index/Index.jsp";--%>
<%--            window.event.returnValue=false;--%>
<%--        }else if(result === str2 ) {--%>
<%--            alert('注册成功!');--%>
<%--        }--%>
<%--    }--%>
<%--</script>--%>
<%--jquery--%>
<script src="/static/js/jquery.min.js"></script>
<%--layui js--%>
<script src="/static/layui/layui.all.js"></script>
</body>
</html>
